<template>
	<div class="wrapper">
		<el-dialog title="修改假期" :visible.sync="dialogVisible" width="50%">
			<el-form
				:model="row"
				ref="ruleForm"
				:rules="rules"
				label-width="120px"
				class="demo-ruleForm"
			>
				<el-form-item :label="$t('adjust_before_balance_days')" prop="modifyDays">
					{{ row.beforeAdjustment }}
				</el-form-item>

				<el-form-item :label="$t('adjust_type')" prop="type">
					<el-radio-group v-model="row.type" @change="typeChange">
						<el-radio :label="1">{{ $t('add') }}</el-radio>
						<el-radio :label="2">{{ $t('reduce') }}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item :label="$t('adjust_days')" prop="desc">
					<el-input
						@input="handleInput"
						type="number"
						size="mini"
						style="width: 50%"
						v-model="row.newModifyDays"
					></el-input>
				</el-form-item>
				<el-form-item :label="$t('adjust_after_balance_days')" prop="name">
					{{ row.resultDays }}
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">{{ $t('cancel') }}</el-button>
				<el-button type="primary" @click="handleSubmit"
					>{{ $t('confirm') }}</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	components: {},
	props: {},
	data() {
		return {
			dialogVisible: false,
			row: {
				type: 1,
			},
			rules: {
				type: [
					{
						required: true,
						message: this.$t('please_select', { name: '' }),
						trigger: 'blur',
					},
				],
			},
		};
	},
	watch: {},
	computed: {},
	methods: {
		handleSubmit() {
			this.$refs.ruleForm.validate((valid) => {
				if(!valid)return;
				this.$parent.changeHoilday({
					...this.row,
					modifyDays:
						this.row.type == 1
							? this.row.newModifyDays
							: -this.row.newModifyDays,
				});
				this.dialogVisible = false;
			});
		},
		typeChange() {
			this.row.newModifyDays = '';
			this.row.resultDays = '';
			this.$forceUpdate();
		},
		handleInput() {
			// 判断type类型，计算resultDays
			if (this.row.type == 1) {
				let resultDays =
					parseFloat(this.row.beforeAdjustment || 0) +
					parseFloat(this.row.newModifyDays || 0);
				this.$set(this.row, 'resultDays', resultDays);
			} else if (this.row.type == 2) {
				let resultDays =
					parseFloat(this.row.beforeAdjustment || 0) -
					parseFloat(this.row.newModifyDays || 0);
				this.$set(this.row, 'resultDays', resultDays);
			}
			this.$forceUpdate();
		},
		open(row) {
			this.row = {};
			console.log('🐛 ~ open ~ row:', row);
			// if(!row.modifyDays && row.remaindeLeaveDays)row.modifyDays = row.remaindeLeaveDays;
			this.row = JSON.parse(JSON.stringify(row));
			this.row.beforeAdjustment = (parseFloat(this.row.modifyDays) +  parseFloat(this.row.vacationDuration)) - parseFloat(this.row.expireDuration) - parseFloat(this.row.leaveDays);
			this.dialogVisible = true;
		},
	},
	created() {},
	mounted() {},
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>
